<template>
	<view class="home_box" :style="{'paddingTop': statusBarHeight + 'px'}">
		<view class="header flex_ac_js">
			<view class="search flex_ac_js" @tap="goToPage('/pages/homes/search/search')">
				<view class="placeholder">搜索单词</view>
				<image src="@/static/images/icon/search.svg" mode="aspectFit"></image>
			</view>
			<view :class="['notice', isRead === 0 ? 'notice_active' : '']" @tap="goToPage('/pages/homes/notice/notice')">
				<uni-icons type="notification" size="36" color="#808080"></uni-icons>
			</view>
		</view>

		<view class="box">
			<swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#6e70f4" style="height: 100%;">
				<swiper-item class="swiper_item">
					<view class="title">我的计划</view>
					<view class="content">
						<view class="switch" @tap="goToPage('/pages/homes/wordBook/wordBook?type=0&bookId=' + userPlanInfo.bookId)">
							<text>切换</text>
							<uni-icons type="right" size="14"></uni-icons>
						</view>
						<view class="book_content">
							<image :src="userPlanInfo.bookPic"></image>
							<view class="book_title">
								<view class="title1">{{userPlanInfo.bookName}}</view>
								<view class="title2">{{userPlanInfo.description}}</view>
							</view>
							<view class="more_words" @tap="goToPage('/pages/wordList/wordList?type=0&id=' + userPlanInfo.bookId)">查看词表</view>
						</view>
						<view class="progress">
							<progress-bar :learned="studyNum" :total="userPlanInfo.wordNum" :showTitle="true"></progress-bar>
						</view>
						<view class="divider"></view>
						<view class="no_plan" v-if="isPlan === 'NO'">
							<emptyState :msg="'还没有制定学习计划，这里空空如也~'" :padding-num="'40rpx 0'"></emptyState>
							<view @tap="showPickerPopup" class="btn_item">开始制定学习计划</view>
						</view>
						<view class="yes_plan" v-if="isPlan === 'YES'">
							<view class="top_plan flex_ac_js">
								<view class="plan_title">今日计划</view>
								<view class="edit_plan flex_ac_jc" @tap="showPickerPopup">
									<uni-icons type="settings-filled" size="20" color="#0000ff99"></uni-icons>
									<text>调整计划</text>
								</view>
							</view>
							<view class="bottom_plan flex_ac_js">
								<view class="plan_item" style="width: 66%;">
									<view class="plan_text">需新学</view>
									<view class="plan_num">{{ isReset==0?userPlanInfo.dailyTarget:remaining }}</view>
									<!-- goToPage('/pages/homes/passageReading/passageReading?type=' + 'planStudy' + '&id=' + userPlanInfo.planId) -->
									<view class="plan_btn" @tap="onClick('planStudy', userPlanInfo.planId)">开始学习</view>
								</view>
								<view class="plan_item" style="width: 34%;">
									<view class="plan_text">需复习</view>
									<view class="plan_num">{{ userPlanInfo.reviewWord }}</view>
									<!-- goToPage('/pages/homes/passageReading/passageReading?type=' + 'planReview' + '&id=' + userPlanInfo.planId) -->
									<view class="plan_btn" @tap="onClick('planReview', userPlanInfo.planId)">复习</view>
									
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper_item">
					<view class="title">我的课本</view>
					<view class="content">
						<view class="switch" @tap="goToPage('/pages/homes/wordBook/wordBook?type=1&bookId=' + userWordBookInfo.bookId)">
							<text>切换</text>
							<uni-icons type="right" size="14"></uni-icons>
						</view>
						<view class="book_content">
							<image :src="userWordBookInfo.bookPic"></image>
							<view class="book_title">
								<view class="title1">{{userWordBookInfo.bookName}}</view>
								<view class="title2">{{userWordBookInfo.description}}</view>
							</view>
							<view class="more_words" @tap="goToPage('/pages/wordList/wordList?type=0&id=' + userWordBookInfo.bookId)">查看词表</view>
						</view>
						<view class="progress">
							<progress-bar :learned="userWordBookInfo.learned" :total="userWordBookInfo.wordNum" :showTitle="true"></progress-bar>
						</view>
						<view class="btns flex_ac_jc">
							<!-- goToPage('/pages/homes/textBook/textBook?id=' + userWordBookInfo.bookId) -->
							<view class="btn_item" @tap="goToPage('/pages/homes/textBook/textBook?id=' + userWordBookInfo.bookId)">进入课本</view>
							<!-- goToPage('/pages/homes/passageReading/passageReading?type=' + 'bookReview' + '&id=' + userWordBookInfo.bookId) -->
							<view class="btn_item" @tap="onClick('bookReview', userWordBookInfo.bookId)">复习</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="box"> -->
			<!-- <view class="item">
				<view class="flex_ac_js">
					<view class="title">我的课本</view>
					<view class="btns flex_ac">
						<view class="b
						
						tn_item" @tap="goToPage('/pages/homes/textBook/textBook?id=' + userWordBookInfo.bookId)">进入课本</view>
						<view class="btn_item" @tap="goToPage('/pages/wordDetails/wordDetails?type=' + 'bookReview' + '&id=' + userWordBookInfo.bookId)">复习</view>
						<view class="btn_item" @tap="goToPage('/pages/wordList/wordList?type=0&id=' + userWordBookInfo.bookId)">查看词表</view>
					</view>
				</view>
				<view class="content flex_js">
					<view class="switch flex_ac" @tap="goToPage('/pages/homes/wordBook/wordBook?type=1&bookId=' + userWordBookInfo.bookId)">
						<text>切换</text>
						<image src="../../static/images/icon/right.svg" mode="aspectFit"></image>
					</view>
					<view class="image_text">
						<image :src="userWordBookInfo.bookPic"></image>
						<view class="center">
							<view class="titles">
								<view class="title1">{{ userWordBookInfo.bookName }}</view>
							</view>
							<view class="progress">
								<progress-bar :learned="userWordBookInfo.learned" :total="userWordBookInfo.wordNum" :showTitle="true"></progress-bar>
							</view>
						</view>
					</view>

				</view>
			</view> -->
			
			<!-- <view class="item">
				<view class="flex_ac_js">
					<view class="title">我的计划</view>
					<view class="btns flex_ac">
						<view class="btn_item" @tap="goToPage('/pages/wordList/wordList?type=0&id=' + userPlanInfo.bookId)">查看词表</view>
					</view>
				</view>
				<view class="content flex_js">
					<view class="switch flex_ac" @tap="goToPage('/pages/homes/wordBook/wordBook?type=0&bookId=' + userPlanInfo.bookId)">
						<text>切换</text>
						<image src="../../static/images/icon/right.svg" mode="aspectFit"></image>
					</view>
					<view class="image_text">
						<image :src="userPlanInfo.bookPic"></image>
						<view class="center">
							<view class="titles">
								<view class="title1">{{ userPlanInfo.bookName }}</view>
							</view>
							<view class="progress">
								<progress-bar :learned="userPlanInfo.learned" :total="userPlanInfo.wordNum" :showTitle="true"></progress-bar>
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="item">
				<view class="flex_ac_js">
					<view class="title">学习计划</view>
					<view class="text">
						<text v-if="isPlan === 'YES'">已学习:{{ 2222}} /</text> 
						<text>总词数:{{ userPlanInfo.wordNum }}</text>
					</view>
				</view>
				<view class="content" v-if="isPlan === 'NO'">
					<emptyState :msg="'空空如也，还没有制定学习计划'" :padding-num="'40rpx 0'"></emptyState>
					<view @tap="showPickerPopup" class="btn">开始制定学习计划</view>
				</view>
				<view class="today_plan flex_ac_jc" v-if="isPlan === 'YES'">
					<view class="plan_item">
						<view class="plan_text">已新学</view>
						<view class="plan_num">
							<text>{{ userPlanInfo.todayStudy }}</text>
							<text> / {{ userPlanInfo.dailyTarget  }}</text>
						</view>
						<view class="plan_btn plan_btn1" @tap="goToPage('/pages/wordDetails/wordDetails?type=' + 'planStudy' + '&id=' + userPlanInfo.planId)">开始学习</view>
					</view>
					<view class="plan_item">
						<view class="plan_text">需复习</view>
						<view class="plan_num">
							<text>{{ userPlanInfo.reviewWord }}</text>
							<text></text>
						</view>
						<view class="plan_btn plan_btn2" @tap="goToPage('/pages/wordDetails/wordDetails?type=' + 'planReview' + '&id=' + userPlanInfo.planId)">复习</view>
					</view>
				</view>
			</view> -->
		<!-- </view> -->
		<!--  tttttttttttttttt -->
		<uni-popup ref="popupPicker" type="center">
			<view class="popup_picker_box">
				<view class="title">学习计划</view>
				<view class="word_total">单词总数：{{ userPlanInfo.wordNum }}</view>
				<view class="close" @click="closePopup">
					<uni-icons type="closeempty" size="20" color="#c0bfe6"></uni-icons>
				</view>
				<view class="word_picker_box flex_ac">
					<view style="flex: 1; text-align: center; font-size: 28rpx;">
						<text>每天背单词</text>
						<picker-view :indicator-style="indicatorStyle" :value="pickerValueCount" @change="bindChangeCount" class="picker_view">
							<picker-view-column>
								<view class="picker_item" v-for="(item,index) in wordColumns" :key="index">
									{{ item }}个
								</view>
							</picker-view-column>
						</picker-view>
						<view style="margin-top: 20rpx; font-size: 32rpx;">
							<text>每日新学</text>
							<view>{{ dailyWords }}</view>
						</view>
					</view>
					<view style="flex: 1; text-align: center; font-size: 28rpx;">
						<text>完成天数</text>
						<picker-view :indicator-style="indicatorStyle" :value="pickerValueDay" @change="bindChangeDay"
							class="picker_view">
							<picker-view-column>
								<view class="picker_item" v-for="(item,index) in dayColumns" :key="index">
									{{ item }}天
								</view>
							</picker-view-column>
						</picker-view>
						<view style="margin-top: 20rpx; font-size: 32rpx;">
							<text>预计总天数</text>
							<view>{{ expectDays }}</view>
						</view>
					</view>
				</view>
				<view class="btn_plan" @tap="submitPopup">开始科学背单词之旅</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import progressBar from '@/components/progressBar/progressBar.vue'
	import { userWordBookInfo } from '@/api/homes/wordBook/wordBook.js'
	import { userPlanInfo, userEditPlan } from '@/api/homes/plan/plan.js'
	import { getNotice } from '@/api/homes/notice/notice.js'
	import { userInfo,getRemaining,getTodayPlan,getStudyWord } from '@/api/user/user.js'
	export default {
		components: {
			progressBar
		},
		data() {
			return {
				studyNum:0,
				isReset:0,
				statusBarHeight: 0,
				selectedDate: '',
				indicatorStyle: `height: 50px; background-color: #0064fb25;`,
				userWordBookInfo: {},
				userPlanInfo: {},
				isPlan: 'NO',
				isRead: 0, //0未读，1已读
				wordColumns: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500],
				dayColumns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200, 250, 300, 350],
				pickerValueCount: [9], // 选择单词数
				pickerValueDay: [], //  选择天数
				dailyWords: 50, // 每日新学
				expectDays: 0, // 预计总天数
				bookId:'',
				remaining:null, 
			}
		},
	
		
		methods: {	
			//今日是否生成
			async getTodayWordNum(){
				let bookId = uni.getStorageSync('planBookId')
				const {data} = await getTodayPlan(bookId)
				this.isReset = data
				console.log(data);
			},
			
			async getUserInfo() {
				const { data } = await userInfo()
				// this.userInfo = data.user
				uni.setStorageSync('userInfo',data.user)
			},
			
			
			// 改变单词数
			bindChangeCount(e) {
				const val = e.detail.value;
				this.pickerValueCount = val
				this.updateExpectDays(val[0])
				this.dailyWords = this.wordColumns[val[0]]
			},
			updateExpectDays(wordIndex){
				let dayData = Math.ceil(this.userPlanInfo.wordNum/this.wordColumns[wordIndex])
				const dayIndex = this.dayColumns.indexOf(dayData)
				if (dayIndex !== -1) {
					this.pickerValueDay = [dayIndex]
				} else {
					this.dayColumns = [...this.dayColumns, dayData].sort((a,b) => a - b)
					const dayIndexNew = this.dayColumns.indexOf(dayData)
					this.pickerValueDay = [dayIndexNew]
				}
				this.expectDays = dayData
			},
			// 改变天数
			bindChangeDay(e) {
				const val = e.detail.value;
				this.pickerValueDay = val
				this.updateExpectWords(val[0])
				this.expectDays = this.dayColumns[val[0]]
			},
			updateExpectWords(dayIndex) {
				let wordData = Math.ceil(this.userPlanInfo.wordNum/this.dayColumns[dayIndex])
				const wordIndex = this.wordColumns.indexOf(wordData)
				if (wordIndex !== -1) {
					this.pickerValueCount = [wordIndex]
				} else {
					this.wordColumns = [...this.wordColumns, wordData].sort((a,b) => a - b)
					const wordIndexNew = this.wordColumns.indexOf(wordData)
					this.pickerValueCount = [wordIndexNew]
				}
				this.dailyWords = wordData
			},
			// 页面跳转
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			onClick(type, id) {
				if (type ==='planStudy') {
					if(this.isReset !=0) {
						if (this.remaining ==0) {
							uni.showToast({
								title:"今日学习已达标",
								icon:'success',
								duration:1000
							})
							return
						}
					}
				}
				uni.setStorageSync('words', { type, id })
				console.log("iiiidddd",this.bookId);
				this.goToPage('/pages/homes/passageReading/passageReading?bookId='+this.bookId)
			},
			// 打开计划弹窗
			showPickerPopup() {
				this.$nextTick(() => {
					this.$refs.popupPicker.open()
				})
			},
			// 关闭计划弹窗
			closePopup() {
				this.$refs.popupPicker.close()
			},
			// 制定计划
			async submitPopup() {
				let params = {
					id: this.userPlanInfo.planId,
					bookId: this.userPlanInfo.bookId,
					finishDay: this.expectDays,
					dailyTarget: this.dailyWords
				}
				const { code ,data} = await userEditPlan(params)
				if (code === 200) {
					this.closePopup()
					this.getUserPlanInfo()
					this.bookId = data
					
					// console.log("dadadad",this.bookId);
				}
			},
			// 课本
			async getUserWordBookInfo() {
				const { data } = await userWordBookInfo()
				this.userWordBookInfo = data[0]
			},
			// 计划
			async getUserPlanInfo() {
				const { data, setPlan } = await userPlanInfo()
				// console.log("jjjjjjj",data);
				uni.setStorageSync('dailyTarget',data.dailyTarget)
				this.bookId = data.bookId
				this.userPlanInfo = data
				uni.setStorageSync('planBookId',data.bookId)
				this.isPlan = setPlan
				this.updateExpectDays(10)
				
				await getRemaining(this.bookId ).then(res=>{
					if(res.code === 200) {
						this.remaining =res.data
					} 
				})
				getStudyWord(this.bookId).then(res=>{
					if(res.code ==200) {
						this.studyNum = res.data
					}
				})
			},
			// 通知
			async getNoticeData() {
				const { data } = await getNotice()
				this.isRead = data.isRead
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.statusBarHeight = res.statusBarHeight
				}
			})
		},
		onShow() {
			this.getUserWordBookInfo()
			this.getUserPlanInfo()
			this.getNoticeData()
			this.getUserInfo()
			this.getTodayWordNum()
		}
	}
</script>

<style lang="scss" scoped>
.home_box {
	background: $uni-bg-color-page;
	height: 100vh;

	.header {
		width: 100%;
		height: 84rpx;
		padding: 10rpx 30rpx;

		.search {
			width: 85%;
			height: 100%;
			background-color: #c5dbfd;
			color: $uni-text-color-placeholder;
			border-radius: 50rpx;
			padding: 0 40rpx;

			.placeholder {
				width: 80%;
				font-size: 28rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx
			}
		}

		.notice {
			width: 10%;

			// image {
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
		
		.notice_active {
			position: relative;
			
			&::after {
				content: '';
				display: block;
				width: 14rpx;
				height: 14rpx;
				background-color: $uni-color-error;
				border-radius: 50%;
				position: absolute;
				right: 8rpx;
				top: 4rpx;
			}
		}
	}

	.box {
		height: calc(100% - 144rpx);
		margin-top: 40rpx;
		overflow-y: auto;

		.swiper_item {
			margin-bottom: 50rpx;

			.title {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #589c1a;
				color: #ffffff;
				border-radius: 0 10rpx 10rpx 0;
			}
			
			.content {
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				position: relative;
				
				.switch {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					font-size: 28rpx;
					color: $uni-text-color-placeholder;
					z-index: 9;
			
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
				
				.book_content {
					display: flex;
					position: relative;
					
					image {
						width: 150rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					
					.book_title {
						width: calc(100% - 170rpx);
						
						.title1 {
							font-size: 32rpx;
							font-weight: bold;
						}
						
						.title2 {
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}
					
					.more_words {
						position: absolute;
						right: 0;
						bottom: 0;
						border: 1rpx solid $uni-border-color;
						font-size: 24rpx;
						border-radius: 6rpx;
						padding: 4rpx 10rpx;
						color: #333333;
					}
				}
				
				.progress {
					margin-top: 30rpx;
				}
				
				.divider {
					width: 100%;
					height: 2rpx;
					background-color: #d7d7d7;
					margin: 20rpx 0 30rpx;
				}
				
				.btns {
					margin-top: 50rpx;
					
					.btn_item {
						width: 200rpx;
						height: 100rpx;
						line-height: 100rpx;
						background-color: #0000ff;
						color: #ffffff;
						font-weight: bold;
						font-size: 32rpx;
						border-radius: 10rpx;
						text-align: center;
					}
					
					.btn_item:first-child {
						margin-right: 80rpx;
					}
				}
			
				.no_plan {
					.btn_item {
						width: 80%;
						height: 88rpx;
						line-height: 88rpx;
						background-color: #0000ff;
						color: #ffffff;
						font-weight: bold;
						font-size: 32rpx;
						border-radius: 24rpx;
						text-align: center;
						margin: 20rpx auto 0;
					}
				}
				
				.yes_plan {
					.top_plan {
						margin-bottom: 20rpx;
						
						.plan_title {
							font-size: 36rpx;
							font-weight: bold;
						}
						
						.edit_plan {
							width: 220rpx;
							height: 58rpx;
							line-height: 58rpx;
							color: #0000ff99;
							background-color: #0000ff19;
							border-radius: 50rpx;
						}
					}
					
					.bottom_plan {
						.plan_item {
							text-align: center;
							
							.plan_num {
								margin: 20rpx 0;
								font-weight: bold;
								font-size: 40rpx;
							}
							
							.plan_btn {
								width: 80%;
								height: 88rpx;
								line-height: 88rpx;
								background-color: #0000ff;
								margin: 0 auto;
								color: #ffffff;
								border-radius: 24rpx;
								font-weight: bold;
								font-size: 32rpx;
							}
						}
					}
				}
			}
			
			// .text {
			// 	color: $uni-text-color-placeholder;
			// 	margin-right: 12rpx;
			// 	font-size: 24rpx;
			// }

			// .btns {
			// 	.btn_item {
			// 		margin-right: 12rpx;
			// 		padding: 4rpx 10rpx;
			// 		border-radius: 6rpx;
			// 		border: 1rpx solid $uni-border-bottom-color;
			// 		font-size: 24rpx;
			// 		color: $uni-text-color-placeholder;
			// 	}
			// }

			// .content {
			// 	padding: 30rpx;
			// 	position: relative;

			// 	.switch {
			// 		position: absolute;
			// 		right: 30rpx;
			// 		top: 30rpx;
			// 		font-size: 28rpx;
			// 		color: $uni-text-color-placeholder;

			// 		image {
			// 			width: 32rpx;
			// 			height: 32rpx;
			// 		}
			// 	}

			// 	.image_text {
			// 		width: 100%;
			// 		display: flex;

			// 		image {
			// 			width: 150rpx;
			// 			height: 200rpx;
			// 			margin-right: 20rpx;
			// 		}

			// 		.center {
			// 			width: calc(100% - 170rpx);

			// 			.titles {
			// 				.title1 {
			// 					font-size: 36rpx;
			// 					color: $uni-text-color;
			// 					font-weight: 500;
			// 				}

			// 				.title2 {
			// 					margin-top: 8rpx;
			// 					font-size: 28rpx;
			// 					color: $uni-text-color-placeholder;
			// 				}
			// 			}

			// 			.progress {
			// 				margin-top: 30rpx;
			// 			}
			// 		}
			// 	}

			// 	.btn {
			// 		width: 75%;
			// 		height: 72rpx;
			// 		line-height: 72rpx;
			// 		margin: 0 auto;
			// 		text-align: center;
			// 		background-color: $uni-text-color-primary;
			// 		color: $uni-text-color-inverse;
			// 		border-radius: 50rpx;
			// 		font-size: 28rpx;
			// 	}
			// }
		
			// .today_plan {
			// 	margin-top: 50rpx;
				
			// 	.plan_item {
			// 		width: 40%;
			// 		text-align: center;
					
			// 		.plan_text {
			// 			font-size: 28rpx;
			// 		}
					
			// 		.plan_num {
			// 			margin: 30rpx 0;
						
			// 			text {
			// 				&:first-child {
			// 					font-size: 48rpx;
			// 					font-weight: bold;
			// 					margin-right: 10rpx;
			// 				}
							
			// 				&:last-child {
			// 					font-size: 28rpx;
			// 				}
			// 			}
			// 		}
					
			// 		.plan_btn {
			// 			height: 64rpx;
			// 			line-height: 64rpx;
			// 			margin: 0 auto;
			// 			border-radius: 50rpx;
			// 			font-size: 28rpx;
			// 		}
					
			// 		.plan_btn1 {
			// 			width: 78%;
			// 			background-color: $uni-color-primary;
			// 			color: $uni-text-color-inverse;
			// 		}
					
			// 		.plan_btn2 {
			// 			width: 68%;
			// 			background-color: $uni-bg-color-opacity;
			// 			color: $uni-text-color-primary;
			// 		}
			// 	}
			// }
		
		}
	}

	.popup_picker_box {
		width: 640rpx;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
		position: relative;

		.title {
			padding-bottom: 20rpx;
			font-size: 32rpx;
			text-align: center;
			border-bottom: 2rpx solid #d7d7d7;
		}

		.word_total {
			font-size: 20rpx;
			text-align: end;
			margin-top: 10rpx;
		}

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.word_picker_box {
			padding: 40rpx 0;
			font-weight: bold;
		}

		.picker_view {
			width: 100%;
			height: 250rpx;
			flex: 100%;

			.picker_item {
				width: 100%;
				padding: 12px;
				box-sizing: border-box;
				text-align: center;
				color: #0000ff;
			}
		}

		.btn_plan {
			width: 72%;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 auto;
			text-align: center;
			background-color: #0000ff;
			color: #ffffff;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
}

</style>